<template>
  <a-modal
    title="填写材料"
    v-model="visible"
    centered
    :width="800"
    @ok="saveFill"
    @cancel="onCancel"
  >
    <div class="base-info-scroll">
      <a-form-model
        ref="ruleForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :model="matForm"
      >
        <a-divider orientation="left">公共材料</a-divider>
        <a-form-model-item label="材料1">
          <a-input placeholder="材料1" />
        </a-form-model-item>
        <a-form-model-item label="材料2">
          <a-input placeholder="材料2" />
        </a-form-model-item>
        <a-form-model-item label="材料3">
          <a-textarea :rows="5"></a-textarea>
        </a-form-model-item>
        <a-divider>YW2021120680WLUR</a-divider>
        <a-form-model-item label="材料1">
          <a-input placeholder="材料2" />
        </a-form-model-item>
        <a-form-model-item label="材料2">
          <a-input placeholder="材料2" />
        </a-form-model-item>
        <a-divider>YW2021120680WLUR</a-divider>
        <a-form-model-item label="材料3">
          <a-input placeholder="材料2" />
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-modal>
</template>

<script>
  import apis from '@/api'
  import storage from 'store'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import { autoMats, getFill, getInFill } from '@/api/business'

  export default {
    props: {
      fromSource: {
        type: String,
        default: ''
      },
      fillKey: {
        type: String,
        default: ''
      },
      noteUrl: {
        type: String,
        default: ''
      }
    },
    name: 'Fill',
    data () {
      return {
        visible: true,
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        updURL: apis.Upload,
        headers: {
          'Access-Token': storage.get(ACCESS_TOKEN)
        },
        baseForm: {},
        matForm: {},
        note: '',
        businessNo: ''
      }
    },
    created () {
      this.getInfo(this.fillKey)
    },
    methods: {
      handleFile (info, name) {
        const { matForm } = this
        if (info.file.status === 'uploading') {
          return false
        }
        if (info.file.status === 'done') {
          matForm[name].value = info.file.response.result.url
          matForm[name].filename = info.file.name
        }
      },
      handleChange (info, name) {
        const { matForm } = this
        if (info.file.status === 'uploading') {
          return false
        }
        if (info.file.status === 'done') {
          matForm[name].value = info.file.response.result.url
        }
      },
      getInfo (key) {
        const app = this
        const mForm = {}
        const bForm = {}
        if (this.fromSource === '1') {
          getFill(key).then(res => {
            const result = res.result
            if (res.status === 0) {
              for (const k in result.base_fields) {
                bForm[result.base_fields[k].name] = result.base_fields[k] || ''
              }
              for (const k in result.mat_fields) {
                mForm[result.mat_fields[k].name] = result.mat_fields[k]
              }
              app.baseForm = bForm
              app.note = result.business.note
              app.matForm = mForm
              app.visible = true
            } else {
              app.$warning({
                title: res.msg
              })
              app.onCancel()
            }
          })
        }
        if (this.fromSource === '2') {
          getInFill(key).then(res => {
            const result = res.result
            if (res.status === 0) {
              for (const k in result.base_fields) {
                bForm[result.base_fields[k].name] = result.base_fields[k]
              }
              for (const k in result.mat_fields) {
                mForm[result.mat_fields[k].name] = result.mat_fields[k]
              }
              app.baseForm = bForm
              app.note = result.business.note
              app.matForm = mForm
              app.visible = true
            } else {
              app.$warning({
                title: res.msg
              })
              app.onCancel()
            }
          })
        }
      },
      onCancel () {
        this.visible = false
        this.$emit('cancel', this.visible)
      },
      saveFill () {
        const app = this
        const form = Object.assign(app.baseForm, app.matForm)
        const _form = {}
        for (const k in form) {
          if (form[k].name2) {
            _form[form[k].name2] = form[k].filename
          }
          _form[form[k].name] = form[k].value
        }
        app.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.$emit('submit', _form)
            this.onCancel()
          } else {
            return false
          }
        })
      },
      autoWrite () {
        const app = this
        if (app.businessNo === '') {
          app.$warning({
            title: '必须填写业务编号'
          })
          return false
        }
        autoMats(this.businessNo).then(res => {
          // const app = this
          const { matForm } = this
          if (res.status === 0) {
            const result = res.result
            for (const k in result) {
              for (const j in matForm) {
                if (k === j) {
                  matForm[j].value = result[k].value
                  matForm[j].filename = result[k].filename
                }
              }
            }
          } else {
            this.$warning({
              title: res.msg
            })
          }
        })
      }
    }
  }
</script>

<style scoped>
  .note >>> img {
    display: block;
    width: 100%;
  }
  .base-info-scroll {
    height: 700px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0 15px;
  }
</style>
